<template>
    <div id="app">
        <router-view v-if="isRouterAlive" />
        <simLockDialog ref="simLockDialogRef" @showSimLockDialog="showSimLockDialog()" />
        <RoamTips />
        <TrafficTips />
        <ThemeToggle />
        <EAA />
    </div>
</template>

<script>
// 组件
import RoamTips from '@/components/common/RoamTips/index.vue';
import TrafficTips from '@/components/common/TrafficTips/index.vue';
import ThemeToggle from '@/components/common/ThemeToggle.vue';

// MIXINS
import useCheckLogin from './hooks/useCheckLogin';
import simLockMixin from './hooks/simLockMixin';
import useCheckWizard from './hooks/useCheckWizard';
import useWebIcon from './hooks/useWebIcon';

import useRefreshListener from './hooks/useRefreshListener';

export default {
    name: 'App',
    data: () => {
        return {
            isRouterAlive: true
        };
    },
    provide: function () {
        return {
            reload: this.reload
        };
    },
    mixins: [useCheckLogin, simLockMixin, useCheckWizard,useWebIcon, useRefreshListener],
    components: {RoamTips, TrafficTips, ThemeToggle},
    created() {
        try {
            require('./assets/css/elementUi/index.less');
        } catch (error) {
            console.log(new Error('ElementUi theme css file does not exist'));
        }
    },
    watch: {
        $route: function () {

            this.$nextTick(() => {
                // 触发向导
                this.checkWizard();

                //触发 0 0 轮询，546不触发
                this.startPolling();

                // 触发 sim 锁  TODO 下来关闭
                // this.showSimLockDialog();
            });
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => {
                this.isRouterAlive = true;
            });
        }
    }
};
</script>

<style lang="less">
@import './assets/css/theme_blue/common.less';
@import './assets/css/theme_dark.less';
.el-scrollbar {
    > .el-scrollbar__bar {
        opacity: 1 !important;
    }
}

// 修复 el-select 缩小出现滚动条问题 -> QDM525-133
.el-select-dropdown__wrap {
    margin: auto !important;
    overflow: auto !important;

    scrollbar-width: none;
    -moz-overflow-style: none;
    -ms-overflow-style: none;
    -o-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
}
</style>
